<template>
  <div class="MyHeader">
    <input class="input" type="text" placeholder="请输入" v-model="inputtext" @keyup.enter="entertext"/>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'MyHeader',
  data() {
    return {
      inputtext: ''
    }
  },
  computed: {},
  methods: {
    ...mapActions('todoData', {receive:'receive'}),
    entertext() {
      // 判断一下输入框是不是为空
      if(this.inputtext.trim() == '') return alert('输入框为空不能提交数据！')
      // 调用来自todopage的方法：传输入框的值
      this.$emit('receive', this.inputtext);
      this.inputtext = ''
    }
  }
}
</script>

<style scoped lang="less">
.MyHeader {
  // display: flex;
  // justify-content: center;

  .input {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    border: 0px;
    outline: none;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    background-color: white;
  }

}
</style>
